<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>分享活动</title>
    <script>
    (function(designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }

        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();

        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);

        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
    </script>
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
    <![endif]-->
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;}
        .hd_container{
            width:100%;
            height:100vh;
            background:url('__PUBLIC__/images/shareHD/img_beijing.png') no-repeat;
            background-size:100% 100%;
            position: relative;
        }
        .hd_wrap{
            width: 100%;
            height:7.2rem;
            background:url('__PUBLIC__/images/shareHD/img_hongbaobeijing.png') no-repeat;
            background-size:100% 100%;
            position: absolute;
            bottom:1rem;
        }
        .hd_gz{
            width:0.88rem;
            height:0.44rem;
            line-height: 0.44rem;
            background-color:#EAA059;
            text-align: center;
            font-size:0.24rem;
            color:#ffffff;
            position: absolute;
            right:0;
            top:1rem;
            border-radius: 0.7rem 0 0 0.7rem;
            -webkit-tap-highlight-color: transparent;
        }
        .hd_top{
            margin:0.2rem 0 0;
            text-align: center;
        }
        .hd_top h3{font-size:0.36rem;font-weight: 400;color:#fefefe;}
        .hd_top h3 .boldmoney{font-size:0.86rem;color:#fefefe;margin:0 0.2rem;}
        .hd_top .time{font-size:0.24rem;color:#b53045;margin:0.1rem 0 0.7rem;}
        .hd_top .time span{
            display: inline-block;
            margin:0 0.12rem;
            background-color:#EB6381;
            color:#ffffff;
            padding:0.05rem;
            border-radius: 0.05rem;
        }

        .progress_wrap{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .progress_line{
            width:3.5rem;
            height:0.2rem;
            position: relative;
			overflow:hidden;
            background-color:#F1556B;
            border-top: 0.02rem solid #DF404D;
            border-bottom: 0.02rem solid #DF404D;
            border-radius: 0.7rem 0 0 0.7rem;
        }
        .progress_active{
            width:0rem;
            height:0.2rem;
            border-radius: 0.7rem 0 0 0.7rem;
            background-color:#85E5ED;
            position: absolute;
            top:0;
            left:0;
            transition:all .5s;
        }
        .progress_text{
            width: 2.2rem;
            height:0.43rem;
            line-height: 0.43rem;
            display: inline-block;
            border-radius: 0.05rem;
            font-size:0.24rem;
            color:#fefefe;
            background-color:#EB6381;
            margin:0.1rem 0 0.2rem;
            position: absolute;
            right:-2.2rem;
            top:-0.75rem;
        }
        .progress_text::after{
            content:'';
            border: 0.2rem solid transparent;
            border-top-color: #EB6381;
            position: absolute;
            left:0;
            bottom:-0.3rem;
        }
        .put_btn{
            width:0.88rem;
            height:0.4rem;
            line-height: 0.4rem;
            background:url('__PUBLIC__/images/shareHD/btn_tixian.png') no-repeat;
            background-size:100% 100%;
            transition: all 0.5s;
            -webkit-tap-highlight-color: transparent;
        }
        .put_btn.on{
            background:url('__PUBLIC__/images/shareHD/btn_tixian1.png') no-repeat;
            background-size:100% 100%;
            transition: all 0.5s;
        }
        .initpromt{
            font-size:0.3rem;
            color:#ffffff;
            display: flex;
            justify-content: space-between;
            width:4.2rem;
            margin:0.05rem auto 0;
        }
        .place_btn{
            width:4.72rem;
            height:1.06rem;
            background:url('__PUBLIC__/images/shareHD/img_btn.png') no-repeat;
            background-size:100% 100%;
            margin:0.1rem auto 0;
            animation: Pscalc .7s infinite ease-in-out;
            -webkit-tap-highlight-color: transparent;
        }
        .JS_share{-webkit-tap-highlight-color: transparent;}
        .hd_bottom{
            display: flex;
            align-items: center;
            justify-content: center;
            width:88%;
            left:50%;
            margin-left:-44%;
            position: absolute;
            bottom:0.8rem;
        }
        .hd_left{
            font-size:0.28rem;
            color:#f8d996;
            padding:0 0.24rem;
            position: relative;
            border-right:2px solid #fddba0;
        }
        .hd_right{
            margin:0 0.28rem;
            flex: 1;
            display: flex;
            flex-wrap: nowrap;
            overflow-x:auto;
            -webkit-overflow-scrolling: touch; 
            padding-bottom: 0.1rem;
        }
        @keyframes Pscalc{
            0%{transform:scale(1)}
            50%{transform: scale(1.05)}
            100%{transform: scale(1)}
        }
        .placeitem{position: relative;margin-right:0.14rem;}
        .placeitem:nth-last-child(1){margin-right: 0;}
        .item_img{
            width:0.7rem;
            height:0.7rem;
            border-radius: 50%;
            object-fit: cover;
            border:none;
            vertical-align: middle;
        }
        .getmoney{
            width:100%;
            height:0.26rem;
            line-height: 0.26rem;
            font-size:0.2rem;
            color:#e8b775;
            background-color:#bc5320;
            position: absolute;
            bottom:-0.1rem;
            left:0;
            text-align: center;
            border-radius: 0.7rem;
        }

        /* guize */
        .guize_container{
            width:100%;
            height:100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color:rgba(0, 0, 0, 0.7);
            z-index: 99;
            display: none;
        }
        .guize_wrap{
            position: absolute;
            width:7.06rem;
            top:20%;
            left:50%;
            margin-left:-3.53rem;
            background:url('__PUBLIC__/images/shareHD/img_beijing3.png') no-repeat;
            background-size:100% 100%;
        }
        .guize_close{
            width:0.56rem;
            height:0.56rem;
            background:url('__PUBLIC__/images/shareHD/btn_close.png') no-repeat;
            background-size:100% 100%;
            position: absolute;
            right:0.4rem;top:-0.8rem;
        }
        .guize_title{
            font-size:0.4rem;
            color:#333333;
            text-align: center;
            padding:0.3rem 0;
        }
        .guize_content{
            padding:0.3rem 0.5rem;
        }
        .guize_content ul li{}
        ul{list-style: none;}
        .guize_list{list-style: none;font-size:0.2rem;color:#333333;}
        .guize_list li{line-height: 1.5;}
        .guize_list2 li{padding-left:0.2rem;margin-bottom: 0;line-height: 1.5;}
        /* 提示分享 */
        .ts_tc_container{
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,0.5);
            position: fixed;
            top:0;left:0;
            z-index: 99;
            display: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .ts_tc_bg{
            width:100%;
            height:300px;
            background:url('__PUBLIC__/images/public/mg_share.png') no-repeat;
            background-size:100% 100%;
        }
        .ts_tc_contnet{
            font-size:18px;
            color:#ffffff;
            padding:180px 130px 30px 90px;
            text-align: center;
        }
        /* 提现弹窗 */
        .put_container{
            width:100%;
            height:100%;
            position: fixed;
            background-color:rgba(0, 0, 0, 0.7);
            top:0;
            left:0;
            z-index: 99;
            display: none;
            -webkit-tap-highlight-color: transparent;
        }
        .put_wrap{
            width:90%;
            background-color:#ffffff;
            position: absolute;
            left:50%;
            margin-left: -45%;
            top:20%;
            border-radius: 0.12rem;
        }
        .put_close{
            width:0.56rem;
            height:0.56rem;
            background:url('__PUBLIC__/images/shareHD/btn_close.png') no-repeat;
            background-size:100% 100%;
            position: absolute;
            right:0rem;top:-0.8rem;
        }
        .warn_img{
            width:1.96rem;
            height:1.96rem;
            margin:0.6rem auto;
            display: block;
        }
        .put_promt{
            margin:0 0.3rem;
            border-top:2px solid #b6b6b6;
            font-size:0.32rem;
            color:#333333;
        }
        .put_promt p {margin:0.6rem 0;line-height: 1.6;}
        .put_tx_btn{
            width:2.49rem;
            height:0.72rem;
            line-height: 0.72rem;
            border-radius: 0.12rem;
            font-size:0.36rem;
            color:#ffffff;
            background-color:#f16724;
            text-align: center;
            margin:0 auto 0.45rem;
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>
<body>
   <section class="hd_container">
    <div class="hd_gz">规则</div>
    <div class="hd_wrap">
        <div class="hd_top">
            <h3>已获得<span class="boldmoney"><!--{$priceHB}--></span>元</h3>
            <p class="time"><span id="hours">00</span>小时<span id="minute">00</span>分<span id="second">00</span>秒后红包失效</p>
            <div class="progress_container">
                <div class="progress_wrap">
                    <div class="progress_line"><div class="progress_active"><div class="progress_text">差5.91元即可提现</div></div></div>
                    <div class="put_btn"></div>
                </div>
                <div class="initpromt"><p>0元</p><p>10元</p></div>
                <div class="place_btn JS_share"></div>
            </div>
        </div>
        <div class="hd_bottom">
            <div class="hd_left">红包<br>记录</div>
            <div class="hd_right">
                <foreach name="recordArr" item="value">
                    <div class="placeitem">
                        <img src="<!--{$value['imgurl']}-->"  class="item_img" alt="">
                        <span class="getmoney"><!--{$value['price']}--></span>
                    </div>
                </foreach>
               <!-- <div class="placeitem">-->
                    <!--<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1934952861,3453579486&fm=27&gp=0.jpg"  class="item_img" alt="">-->
                    <!--<span class="getmoney">3.52</span>-->
                <!--</div>-->
                <div class="placeitem JS_share">
                    <img src="__PUBLIC__/images/shareHD/icon_zhuanfa.png"  class="item_img" alt="">
                </div>
                <div class="placeitem JS_share">
                    <img src="__PUBLIC__/images/shareHD/icon_zengjia.png"  class="item_img" alt="">
                </div>
                <div class="placeitem JS_share">
                    <img src="__PUBLIC__/images/shareHD/icon_zengjia.png"  class="item_img" alt="">
                </div>
            </div>
        </div>
    </div>
   </section>
   <!-- guize -->
   <section class="guize_container">
    <div class="guize_wrap">
        <div class="guize_close"></div>
        <h3 class="guize_title">活动规则</h3>
        <div class="guize_content">
            <ul class="guize_list">
                <li>1.活动玩法：用户参加助力2018运势的活动可获得现金奖励，累计金额满10元可提现，不满提现金额可继续累计。</li>
                <li>2.获得现金途径：
                    <ul class="guize_list2">
                        <li>（1）用户参与活动可得1-10元的初始现金奖励;</li>
                        <li>（2）获得更多现金需邀请好友助力，好友成功助力后可随机获得现金奖励，金额累计10元可提现;</li>
                        <li>（3）助力好友也可得现金红包;</li>
                    </ul>
                </li>
                <li>3.活动细则：
                    <ul class="guize_list2">
                        <li>（1）每名用户每天不限制邀请好友次数;</li>
                        <li>（2）每次邀请的助力好友不可重复;</li>
                        <li>（3）每名用户只有一次提现的机会。</li>
                    </ul>
                </li>
                <li>4.同一设备仅限参与活动一次，多账号用户不支持累计计算，同一设备、账户、支付账号、手机号均视为同一用户。</li>
            </ul>
        </div>
    </div>
   </section>
   <!-- 提示分享 -->
    <div class="ts_tc_container">   
        <div class="ts_tc_bg">
            <div class="ts_tc_contnet">点击右上角分享到微信群和朋友圈。</div>
        </div>
    </div>
    <!-- 提现弹窗 -->
    <div class="put_container">
        <div class="put_wrap">
            <div class="put_close"></div>
            <img src="__PUBLIC__/images/public/img_jinggao.png" class="warn_img" alt="">
            <div class="put_promt">
                <p>您必须关注“趣味心理测试”公众号后，才能申请提现哦！(关注趣味心理测试公众号之后点击“红包提现”) 点击后就能领取红包哦！</p>
            </div>
            <div class="put_tx_btn">立即关注</div>
        </div>
    </div>

   <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
   <script>
        let totalMoney = "<!--{$priceHB}-->"; //提现金额    
        let setHDTime = '<!--{$setHDTime}-->'; //设置活动时间
        if(totalMoney < 10){
            let absNum = (10-totalMoney).toFixed(2);
            $('.progress_text').text('差'+absNum+'元即可提现');
        }else{
            $('.progress_text').text('你已达到提现金额');
        }
        $('.hd_gz').on('click',function(){
            $('.guize_container').fadeIn();
        })
        $('.guize_close').on('click',function(){
            $('.guize_container').fadeOut();
        })
        $('.JS_share').on('click',function(){
            $('.ts_tc_container').fadeIn();
        })
        $('.ts_tc_container').on('click',function(){
            $(this).fadeOut();
        })
        $('.put_container').on('click',function(e){
            if(e.target == e.currentTarget){
                $(this).fadeOut();
            }
        })
        $('.put_close').on('click',function(){
            $('.put_container').fadeOut()
        })
        $('.put_tx_btn').on('click',function(e){
            location.href="<!--{:U('Bzjp/tixianUrl','',false)}-->";
        })
        window.onload = function(){
            $('.progress_active').width((3.5 / 10) * totalMoney +'rem');
            if(totalMoney >= 10){
                $('.put_btn').addClass('on');
                $('.put_btn.on').on('click',function(){
                    $('.put_container').fadeIn();
                })
            }
            setInter();
        }       
        
        function setInter(){
            let timeArr =  countTime(setHDTime);
            if(timeArr == ""){
                alert('活动结束了')
                return
            }
            $('#hours').text(snum(timeArr[0]))
            $('#minute').text(snum(timeArr[1]))
            $('#second').text(snum(timeArr[2]))
            setTimeout(function(){
                setInter();
            },1000)
        }

        function countTime(setEndTime){
            let endTime = new Date(setEndTime).getTime();
            let time = new Date().getTime();

            if(endTime <= time){
                return [];
            }else{
                let HsecondNum = endTime-time;
                let dd = Math.floor( HsecondNum % (24*3600*1000)); 
                let hours = Math.floor(HsecondNum / (3600*1000));

                let minutesNum = dd%(3600*1000);         
                let minutes = Math.floor(minutesNum/(60*1000));

                let secondNum = dd%(60*1000)
                let second = Math.floor(secondNum/1000);
                
                return [hours,minutes,second]
            }
        }
        function snum(num){
            if(num > 9){
                return num;
            }else{
                return '0'+num;
            }
        }


        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<!--{$appid}-->', // 必填，公众号的唯一标识
            timestamp: '<!--{$timestamp}-->', // 必填，生成签名的时间戳
            nonceStr: '<!--{$noncestr}-->', // 必填，生成签名的随机串
            signature: '<!--{$signature}-->',// 必填，签名，见附录1
            jsApiList: [
                'checkJsApi',
                'openLocation',
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'scanQRCode'
            ] // 必填，需要使用的JS接口列表，所有JS接 口列表见附录2
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
            // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//         alert('成功');
            wx.onMenuShareAppMessage({//分享朋友圈
                title: '太神了！推荐你一个算命大师，准的让我不可思议！', // 分享标题
                desc: '专业命盘精论流年运势，一次掌握一年中整体、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。点出你的八字旺弱、五行喜忌，近12个月的每月运势好坏预测，助你在婚恋、工作、事业中及时调整方向大展身手，如鱼得水。', // 分享描述
                link: '<!--{$JPwxfxUrl}-->', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://www.xzcircle.com:8081/xz/images/09_.png', // 分享图标  http://api.xbd61.com/hebazi/public/img/icon.png
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                    $.getJSON("<!--{:U('Bzjp/wxShare','',false)}-->",function(data){//回调入库
                    });
                    if(channel=='qudao100'){
                        location.href="<!--{:U('Bzjp/userWx','',false)}-->";
                    }
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            wx.onMenuShareTimeline({
                title: '太神了！推荐你一个算命大师，准的让我不可思议！', // 分享标题
                desc: '专业命盘精论流年运势，一次掌握一年中整体、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。点出你的八字旺弱、五行喜忌，近12个月的每月运势好坏预测，助你在婚恋、工作、事业中及时调整方向大展身手，如鱼得水。', // 分享描述
                link: '<!--{$JPwxfxUrl}-->', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://www.xzcircle.com:8081/xz/images/09_.png', // 分享图标  http://api.xbd61.com/hebazi/public/img/icon.png
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                    $.getJSON("<!--{:U('Bzjp/wxShare','',false)}-->",function(data){//回调入库
                    });
                }

            });

            wx.onMenuShareQQ({
                title: '周易大师一对一帮你转运！八字测算趋利避害', // 分享标题
                desc: '专业命盘精论流年运势，一次掌握一年中整体、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。点出你的八字旺弱、五行喜忌，近12个月的每月运势好坏预测，助你在婚恋、工作、事业中及时调整方向大展身手，如鱼得水。', // 分享描述
                link: '<!--{$JPwxfxUrl}-->', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://qiniu.ddznzj.com/media/180626/180626135703102.png', // 分享图标  http://api.xbd61.com/hebazi/public/img/icon.png
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                }
            });

            wx.onMenuShareQZone({
                title: '周易大师一对一帮你转运！八字测算趋利避害', // 分享标题
                desc: '专业命盘精论流年运势，一次掌握一年中整体、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。点出你的八字旺弱、五行喜忌，近12个月的每月运势好坏预测，助你在婚恋、工作、事业中及时调整方向大展身手，如鱼得水。', // 分享描述
                link: '<!--{$JPwxfxUrl}-->', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://hy.yixueqm.com/zhiming/Public/images/public/09.png', // 分享图标  http://api.xbd61.com/hebazi/public/img/icon.png
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                }
            });

            wx.onMenuShareWeibo({
                title: '周易大师一对一帮你转运！八字测算趋利避害', // 分享标题
                desc: '专业命盘精论流年运势，一次掌握一年中整体、桃花婚姻、财运工作、健康家庭等运势的吉凶变化。点出你的八字旺弱、五行喜忌，近12个月的每月运势好坏预测，助你在婚恋、工作、事业中及时调整方向大展身手，如鱼得水。', // 分享描述
                link: '<!--{$JPwxfxUrl}-->', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://hy.yixueqm.com/zhiming/Public/images/public/09.png', // 分享图标  http://api.xbd61.com/hebazi/public/img/icon.png
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                }
            });

        });

   </script>
</body>
</html>